<template>
  <div>
    <van-tabs v-model="active" animated class="bt" sticky swipeable lazy-render>
      <van-tab title="最新">
        <newest></newest>
      </van-tab>
      <van-tab title="推荐">
        <recommend></recommend>
      </van-tab>
      <van-tab title="分类">
        <category></category>
      </van-tab>
      <van-tab title="热门">
        <hold></hold>
      </van-tab>
    </van-tabs>
    <div class="search">
      <van-icon name="search" @click="toSearch" slot="right" />
    </div>
    <router-view />
  </div>
</template>
<style scoped>
/* .bt .van-tabs__wrap{
  background-image: linear-gradient(to right, red , yellow);
} */
</style>
<script>
import newest from "../components/newest";
import recommend from "../components/recommend";
import category from "../components/category";
import hold from "../components/hold";
import search from "../views/search";

export default {
  data() {
    return {
      active: this.$store.getters.getUrl,
      active: ""
    };
  },
  methods: {
    toSearch() {
      this.$router.push("search");
    }
  },
  watch: {
    active() {
      this.$store.commit("setUrl", this.active);
    }
  },
  components: {
    newest: newest,
    recommend: recommend,
    category: category,
    hold: hold
  }
};
</script>
<style scoped>
.search {
  position: fixed;
  z-index: 10;
  top: 12px;
}
</style>